<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<div th:replace="dashboard/header :: header"></div>

<body>
	<div class="container-fluid">
		<br />
		<div class="row">
			<!-- 
				<div class="col-4">1 of 3</div>
				 -->
			<div class="col-12">
				<form id="modifyForm" enctype="multipart/form-data">
					<nav aria-label="breadcrumb">
					  <ol class="breadcrumb">
						<li class="breadcrumb-item active" aria-current="page">使用信息</li>
					  </ol>
					</nav>
					
					<div class="form-group row">
						<label class="col-sm-2 col-form-label" for="exampleInputPassword1">申请说明</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" name="goodsName" autocomplete="off" placeholder="申请说明">
						</div>
					</div>

					<div class="form-group row">
						<label class="col-sm-2 col-form-label" for="exampleInputPassword1">使用时间</label>
						<div class="col-sm-5">
							<input type="text" class="form-control" name="sendTime" autocomplete="off" placeholder="开始时间">
						</div>
						<div class="col-sm-5">
							<input type="text" class="form-control" name="endTime" autocomplete="off" placeholder="结束时间">
						</div>
					</div>
					
					<div class="form-group row">
						<label class="col-sm-2 col-form-label" for="exampleInputPassword1">申请源</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" autocomplete="off" name="receiveAddress" placeholder="如:张三(请具体到人名)">
						</div>
					</div>

					<nav aria-label="breadcrumb">
					  <ol class="breadcrumb">
						<li class="breadcrumb-item active" aria-current="page">系统信息</li>
					  </ol>
					</nav>
					<div class="form-group row">
						<label class="col-sm-2 col-form-label" for="exampleInputPassword1">操作系统</label>
						<div class="col-sm-4">
							<input type="text" class="form-control" name="orderSystem" value="Centos_x64" placeholder="操作系统">
						</div>
						<div class="col-sm-3">
							<input type="text" class="form-control" name="orderStorage" value="100G" placeholder="存储">
						</div>
						<div class="col-sm-3">
							<input type="text" class="form-control" name="orderMemory" value="8G" placeholder="内存">
						</div>
					</div>
					
					<br />
					<button type="button" onclick="save()"
						class="btn btn-primary btn-lg btn-block">保存</button>
				</form>
			</div>
		</div>
	</div>

	<script
		src="http://training-static.linesno.com/vendor/jquery/jquery.min.js"></script>
	<script
		src="http://training-static.linesno.com/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
	<script src="http://training-static.linesno.com/layer/layer.js"></script>
	<script
		src="http://training-static.linesno.com/js/jquery.form/jquery.form.js"></script>

	<!-- jquery datapicker -->
	<script
		src="http://training-static.linesno.com/jq-datapicker/js/foundation-datepicker.js"></script>
	<script
		src="http://training-static.linesno.com/jq-datapicker/js/locales/foundation-datepicker.zh-CN.js"></script>

	<script type="text/javascript">
		$(function(){
			$('input[name=sendTime]').fdatepicker({format: 'mm/dd/yyyy'});	
			$('input[name=endTime]').fdatepicker({format: 'mm/dd/yyyy'});	
		}) ; 
	
		var options = {
			url : "/manager/order_apply_save",
			type : "post",
			success : successfun,
			dataType : "json",
			timeout : 3000
		};

		function save() {
			$('#modifyForm').ajaxSubmit(options);
		}

		function successfun(response, status) {
			layer.msg(response.message);
		}

		function preview(file) {
			var prevDiv = document.getElementById('preview');
			if (file.files && file.files[0]) {
				var reader = new FileReader();
				reader.onload = function(evt) {
					prevDiv.innerHTML = '<img style="width: 80px; height: 80px; margin-top: 10px; border-radius: 5px;" src="' + evt.target.result + '" />';
				}
				reader.readAsDataURL(file.files[0]);
			} else {
				prevDiv.innerHTML = '<div class="img" style="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale,src=\'' + file.value + '\'"></div>';
			}
		}
	</script>

</body>
</html>
